---
title: 사용자 정의 글꼴 사용
description: Astro 웹사이트에 사용자 정의 서체를 추가하려고 하시나요? Fontsource를 통해 Google Fonts를 사용하거나 원하는 글꼴을 추가하세요.
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';


이 안내서는 프로젝트에 웹 글꼴을 추가하고 컴포넌트에서 사용하는 방법을 설명합니다.

## 로컬 글꼴 파일 사용

이 예시는 `DistantGalaxy.woff` 글꼴 파일을 사용하여 사용자 정의 글꼴을 추가하는 방법을 보여줍니다.

1. `public/fonts/` 디렉터리에 글꼴 파일을 추가하세요.
2. CSS에 다음 `@font-face` 문을 추가하세요. CSS는 전역 `.css` 파일이거나, `<style is:global>` 블록이거나, 글꼴을 사용할 특정 레이아웃이나 컴포넌트의 `<style>` 블록일 수도 있습니다.

    ```css
    /* 사용자 정의 글꼴 모음을 등록하고 브라우저에 해당 글꼴 모음을 찾을 수 있는 위치를 알려주세요. */
    @font-face {
      font-family: 'DistantGalaxy';
      src: url('/fonts/DistantGalaxy.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    ```

3. `@font-face` 문의 `font-family` 값을 사용하여 컴포넌트나 레이아웃의 요소에 스타일을 지정하세요. 이 예시에서 `<h1>` 제목에는 사용자 정의 글꼴이 적용되지만 `<p>` 단락에는 적용되지 않습니다.

    ```astro title="src/pages/example.astro" {9-11}
    ---
    ---

    <h1>머나먼 은하계에서...</h1>

    <p>사용자 정의 글꼴을 사용해 제목을 멋지게 꾸밀 수 있습니다!</p>

    <style>
    h1 {
      font-family: 'DistantGalaxy', sans-serif;
    }
    </style>
    ```

## Fontsource 사용

[Fontsource](https://fontsource.org/) 프로젝트는 Google Fonts 및 기타 오픈 소스 글꼴 사용을 단순화합니다. 사용하려는 글꼴을 설치할 수 있는 npm 모듈을 제공합니다.

1. [Fontsource 카탈로그](https://fontsource.org/)에서 사용하고 싶은 글꼴을 찾아보세요. 이 예시에서는 [Twinkle Star](https://fontsource.org/fonts/twinkle-star)를 사용합니다.
2. 선택한 글꼴에 대한 패키지를 설치합니다.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @fontsource/twinkle-star
      ```
      </Fragment>
    </PackageManagerTabs>

    :::tip
    Fontsource 웹사이트의 각 글꼴 페이지에 있는 "Quick Installation" 섹션에서 올바른 패키지 이름을 찾을 수 있습니다. 패키지 이름은 `@fontsource/`로 시작하고 그 뒤에 글꼴 이름이 있습니다.
    :::

3. 글꼴을 사용하려는 컴포넌트에서 글꼴 패키지를 가져옵니다. 일반적으로 사이트 전체에서 글꼴을 사용할 수 있도록 공통 레이아웃 컴포넌트에서 이 작업을 수행할 수 있습니다.

    가져오기는 글꼴을 설정하는 데 필요한 `@font-face` 규칙을 자동으로 추가합니다.

    ```astro title="src/layouts/BaseLayout.astro"
    ---
    import '@fontsource/twinkle-star';
    ---
    ```

4. Fontsource 페이지의 `body` 예시에 나와있는 것처럼 `font-family` 값으로 글꼴의 이름을 사용하세요. 이는 Astro 프로젝트에서 CSS를 작성할 수 있는 모든 곳에서 작동합니다.

    ```css
    h1 {
      font-family: "Twinkle Star", cursive;
    }
    ```

## Tailwind에 글꼴 등록

[Tailwind 통합](/ko/guides/integrations-guide/tailwind/)을 사용하는 경우 이 페이지의 이전 방법 중 하나에 약간의 수정을 거쳐 글꼴을 설치할 수 있습니다. [로컬 글꼴에 대한 `@font-face` 문](#로컬-글꼴-파일-사용)을 추가하거나 [Fontsource의 `import` 전략](#fontsource-사용)을 사용하여 글꼴을 설치할 수 있습니다.

Tailwind에 글꼴을 등록하려면 다음 단계를 따르세요.

1. 위 안내 중 하나를 따르되, CSS에 `font-family`를 추가하는 마지막 단계는 건너뛰세요.
2. `tailwind.config.mjs`에 서체 이름을 추가하세요.

    이 예시에서는 `Inter`를 sans-serif 글꼴 스택에 추가하고, Tailwind CSS의 기본 대체 글꼴을 사용합니다.

    ```js title="tailwind.config.mjs" ins={1,8-10}
    import defaultTheme from 'tailwindcss/defaultTheme'

    /** @type {import('tailwindcss').Config} */
    export default {
    	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
    	theme: {
    		extend: {
    			fontFamily: {
    				sans: ['Inter', ...defaultTheme.fontFamily.sans],
    			},
    		},
    	},
    	plugins: [],
    }
    ```

    이제 프로젝트의 모든 sans-serif 글자 (Tailwind의 기본값)는 선택한 글꼴을 사용하고 `font-sans` 클래스도 Inter 글꼴을 적용합니다.

자세한 내용은 [사용자 정의 글꼴 모음 추가에 대한 Tailwind 문서](https://tailwindcss.com/docs/font-family#using-custom-values)를 확인하세요.

## 더 많은 자료

- [MDN의 웹 글꼴 안내서](https://developer.mozilla.org/ko/docs/Learn/CSS/Styling_text/Web_fonts)에서 웹 글꼴이 작동하는 방식을 알아보세요.
- [Font Squirrel의 웹 글꼴 생성기](https://www.fontsquirrel.com/tools/webfont-generator)를 사용하여 글꼴에 맞는 CSS를 생성하세요.
